<template>
	<el-dialog title="添加文章" :visible.sync="dialogVisible" width="90%"  :close-on-click-modal="false"
		:modal-append-to-body="false" v-drag2anywhere>
		<el-form :model="formData" ref="formData" label-width="100px" :rules="rules">
			<el-row :gutter="30">
				<el-col :span="8">
					<el-form-item label="文章分类" prop="catid" style="width: 100%;">
						<el-select v-model="formData.catid" placeholder="请选择" style="width: 100%;">
							<el-option :label="item.title" :value="item.catid" v-for="(item,index) in catList"
								:key="index">
								<div style="padding-left: 0px;" v-if="item.level==0">
									{{item.title}}
								</div>
								<div style="padding-left: 15px;" v-if="item.level==1">
									┠──{{item.title}}
								</div>
								<div style="padding-left: 40px;" v-if="item.level==2">
									┠──{{item.title}}
								</div>
								<div style="padding-left: 50px;" v-if="item.level==3">
									┠──{{item.title}}
								</div>

							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="文章标题" prop="title">
						<el-input v-model="formData.title" placeholder="请输入文章标题" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="30">
				<el-col :span="8">
					<el-form-item label="作者" prop="author">
						<el-input v-model="formData.author" placeholder="作者" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<div >
			<EditorUI ref="editorUI"></EditorUI>
		</div>


		<div slot="footer" style="text-align: center;">
			<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
			<el-button type="primary" size="medium" @click="handleSave">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import EditorUI from '@/components/myeditor.vue';
	import http from '/src/utils/http.js';
	export default {
		components:{
			EditorUI
		},
		data() {
			return {
				index: -1,
				catList: [],
				formData: {
					title: '',
					author: '',
					catid: "",
					content: ''
				},
				rules: {
					"title": [{
						required: true,
						message: "标题名称不能为空!",
						trigger: "blur"
					}],
					"catid": [{
						required: true,
						message: "文章分类不能为空!",
						trigger: "change"
					}],
				},
				dialogVisible: false
			}
		},
		methods: {
			init() {
				this.loadCategory();
			},
			loadCategory() {
				http.post("/api/admin/articlecategory/list_array").then(res => {
					if (res.status == 200 && res.data.code) {
						this.catList = res.data.list;
						console.log(this.tableData);
					}
				}).catch(error => {})
			},
			handleSave() {
				this.$refs.formData.validate((ok) => {
					if(ok){
						const params={
							catid:this.formData.catid,
							title:this.formData.title,
							author:this.formData.author,
							content:this.$refs.editorUI.getHtml()
						}
						
						http.post("/api/admin/article/create", params).then(res => {
							if (res.status == 200 && res.data.code) {
								this.$message.success(res.data.msg);
								this.dialogVisible=false;
								this.$emit("complete");
							}
						}).catch(error => {})
					}
				});
			}
		}
	}
</script>

<style>
</style>